<template>
  <!-- 直播课堂 -->
  <div class="streaminglist" id="streaminglist">
    <div class="periodiCon_dynamic">
      <div class="periodiCon_cluster_nav">
        <p class="periodiCon_cluster_nav_tot">课程分类</p>
        <div style="width:100%" class="periodiCon_cluster_nav_tot_div">
          <ul>
            <li v-for="(item,index) in periodiCnav" :key="index" @click="periodiC_tab(item.type)">
              <div
                class="periodiCon_cluster_nav_tot_tit"
                :style="{backgroundImage: 'url(' + (item.bg) + ')'}"
                style="backgroundSize:cover;"
              >
                <p>{{item.name}}</p>
              </div>
              <div class="periodiCon_cluster_nav_tot_cover" v-show="showfalse == item.type">
                <img src="../../../../static/zbsy/zbbj6.png" alt />
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="periodiCon_cluster_cont">
        <div class="periodiCon_cluster_cont_nav">
          <ul>
            <li
              v-for="(item,index) in cont_nav"
              :key="index"
              :class="{contNav:contNav == index+1}"
              @click="getlistNav(index+1)"
            >
              <a>{{item.name}}</a>
            </li>
          </ul>
        </div>
        <div class="periodiCon_cluster_cont_main">
          <ul v-if="periodiContList.length == 0">
            <div class="periodiCon_cluster_cont_main_nolist">
              <img src="../../../../static/zb/ky.png" alt />
              <p>暂无此直播课程，敬请期待哦！</p>
            </div>
          </ul>
          <ul>
            <li v-for="(item,index) in periodiContList" :key="index" @click="periodiCon(item)">
              <div class="periodiCon_cluster_Cont_img">
                <img :src="item.CoverPicturePath" alt />
              </div>
              <div class="periodiCon_cluster_Cont_right">
                <div class="periodiCon_cluster_Cont_right_tit">
                  <span
                    class="periodiCon_cluster_Cont_right_tit_tit"
                    style="display: -webkit-box;-webkit-line-clamp: 1;line-clamp: 1;-webkit-box-orient: vertical;"
                  >{{item.CourseName}}</span>
                  <span
                    class="periodiCon_cluster_Cont_right_tit_huifang"
                    @click="huifang(item)"
                    @click.stop
                    v-if="item.IsPlayBack == true"
                  >精彩回放</span>
                  <div style="clear:both;"></div>
                </div>
                <p>
                  <span
                    v-for="(itemc,index) in (item.Label || '').split(',')"
                    :key="index"
                  >{{itemc}}</span>
                </p>
                <p style="text-decoration:line-through" v-if="item.DisCount < 1">￥{{item.Price}}.00</p>
                <p v-if="item.DisCount >= 1">￥{{item.Price}}.00</p>
                <p>
                  <span v-if="item.DisCount < 1">
                    {{parseInt(item.DisCount * 10)}}折后：
                    <span
                      style="font-size:21px"
                    >￥{{(item.Price * item.DisCount).toFixed(2)}}</span>
                  </span>
                  <span>{{item.NumberPeople}}人报名</span>
                </p>
              </div>
              <div style="clear:both;"></div>
            </li>
            <div style="clear:both;"></div>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { pagination } from "../../../../src/assets/mixin/data-table";
export default {
  mixins: [pagination],
  data() {
    return {
      contNav: this.contNav,
      periodiCnav: [
        {
          type: "0",
          bg: "../../../../static/zbsy/zbbj1.png",
          name: "全部课程"
        },
        {
          type: "2",
          bg: "../../../../static/zbsy/zbbj2.png",
          name: "精品课程"
        },
        {
          type: "3",
          bg: "../../../../static/zbsy/zbbj4.png",
          name: "1v1课程"
        },
        {
          type: "4",
          bg: "../../../../static/zbsy/zbbj5.png",
          name: "预备课程"
        },
        {
          type: "5",
          bg: "../../../../static/zbsy/zbbj8.png",
          name: "速成班"
        },
        {
          type: "1",
          bg: "../../../../static/zbsy/zbbj3.png",
          name: "SCI课程"
        }
      ],
      cont_nav: [{ name: "即将开始" }, { name: "已结束" }],

      periodiConact: 0,
      showfalse: 0,

      periodiContList: [],

      // 折后价格
      zheprice: "",
      // 折扣
      disCount: ""
    };
  },
  methods: {
    getInfo() {
      this.page.currentPage = 1;
      this.getTableData(this.contNav);
    },

    // 获取直播课程数据
    getTableData(index) {
      this.contNav = index;
      // 加密完成
      this.$httphelper
        .post("/api/LmCourseApi/GetCouresPageList", {
          Limit: this.page.pageSize,
          Page: this.page.currentPage,
          Type: this.periodiConact,
          StartType: index
        })
        .then(res => {
          this.periodiContList = res.data.data;
          this.periodiContList.forEach(item => {
            this.disCount = parseInt(item.DisCount * 10);
            this.zheprice = (item.Price * item.DisCount).toFixed(2);
          });
          this.page.total = res.data.totalcount;
        })
        .catch(e => {
          console.log(e);
        });
    },

    handleCurrentPageChange(val) {
      this.page.currentPage = val;
      this.getTableData();
      let osTop = document.documentElement.scrollTop || document.body.scrollTop;
      let ispeed = Math.floor(-osTop / 1.5);
      document.documentElement.scrollTop = document.body.scrollTop =
        osTop + ispeed;
      this.isTop = true;
    },

    // 点击查看详情需登录
    periodiCon(item) {
      let userName = sessionStorage.getItem("userName");
      this.$router.push({
        path: "/streaming/streamingdetail",
        query: {
          OpCourseId: item.OpenId,
          type: "2",
          Hftype: 1,
          coursetype: this.periodiConact,
          contNav: this.contNav
        }
      });
    },

    // 点击切换模块数据
    periodiC_tab(type) {
      this.periodiConact = type;
      this.showfalse = type;
      this.getTableData(1);

      this.$router.push({
        path: "/streaming/streamingHome",
        query: {
          coursetype: type,
          contNav: 1
        }
      });
    },

    // 点击切换是否直播过
    getlistNav(index) {
      this.contNav = index;
      this.getTableData(index);

      this.$router.push({
        path: "/streaming/streamingHome",
        query: {
          coursetype: this.periodiConact,
          contNav: index
        }
      });
    },

    // 精彩回放
    huifang(item) {
      this.$router.push({
        path: "/streaming/streamingdetail",
        query: {
          OpCourseId: item.OpenId,
          Hftype: 2,
          type: 2,
          coursetype: this.periodiConact,
          contNav: this.contNav
        }
      });
    }
  },
  components: {},
  created() {
    this.showfalse = this.$route.query.coursetype;
    this.contNav = this.$route.query.contNav;
  },
  mounted() {
    this.periodiConact = this.$route.query.coursetype;
    this.getInfo();
  }
};
</script>

<style lang="less" scoped>
#streaminglist {
  /deep/.el-pagination__total {
    display: none !important;
  }
  /deep/.el-pagination__sizes {
    display: none !important;
  }
  /deep/.el-pagination {
    width: 100%;
    overflow: hidden;
    overflow-x: auto;
    text-align: center;
  }
  .el-pagination::-webkit-scrollbar {
    display: none;
  }
  .periodiCon_dynamic {
    width: 100%;
    margin: 0 auto;
    position: relative;
    .periodiCon_cluster_nav {
      width: 94%;
      padding: 0px;
      margin: 0 auto;
      border-bottom: 1px solid #e6e6e6;
      .periodiCon_cluster_nav_tot {
        color: #000000;
        font-size: 18px;
        width: 100%;
        font-weight: bold;
        float: left;
        line-height: 35px;
      }
      .periodiCon_cluster_nav_tot_div {
        width: 100%;
        overflow: hidden;
        overflow-x: auto;
        ul {
          display: inline-block;
          width: 259%;
          margin-top: 21px;
          margin-left: 0;
          padding-bottom: 16px;
          li {
            width: 15%;
            height: 72px;
            list-style: none;
            float: left;
            margin-right: 9px;
            position: relative;
            .periodiCon_cluster_nav_tot_tit {
              width: 100%;
              height: 100%;
              border-radius: 5px;
              p {
                color: #ffffff;
                font-size: 16px;
                font-weight: bold;
                text-align: center;
                line-height: 72px;
                cursor: pointer;
              }
            }
            .periodiCon_cluster_nav_tot_cover {
              width: 100%;
              height: 100%;
              position: absolute;
              top: 0;
              left: 0;
              background: rgba(0, 0, 0, 0.3);
              img {
                position: absolute;
                right: 0;
              }
            }
          }
        }
      }
    }
    .periodiCon_cluster_cont {
      width: 94%;
      margin: 0 auto;
      height: auto;
      .periodiCon_cluster_cont_nav {
        width: 100%;
        height: 50px;
        ul {
          height: 50px;
          .contNav {
            a {
              color: #003c80;
              font-weight: bold;
            }
          }
          li {
            width: 140px;
            height: 50px;
            list-style: none;
            float: left;
            line-height: 50px;
            text-align: center;
            a {
              font-size: 16px;
              color: #000000;
              border-right: 1px solid #eeeeee;
              padding-right: 34px;
              padding-left: 34px;
            }
          }
        }
      }
      .periodiCon_cluster_cont_main {
        width: 100%;
        height: auto;
        .periodiCon_cluster_cont_main_nolist {
          width: 92%;
          height: 280px;
          text-align: center;
          margin: 0 auto;
          img {
            width: 100%;
            height: 83%;
          }
          p {
            letter-spacing: 3px;
            color: #333;
            font-size: 18px;
          }
        }
        ul {
          width: 100%;
          height: 100%;
          li:hover {
            background: #f7f8fa;
            .periodiCon_cluster_Cont_right {
              .periodiCon_cluster_Cont_right_tit {
                .periodiCon_cluster_Cont_right_tit_tit {
                  color: #003c80;
                }
              }
            }
          }
          li {
            width: 50%;
            padding: 10px 4px;
            list-style: none;
            border-bottom: 1px solid #e6e6e6;
            position: relative;
            float: left;
            cursor: pointer;
            .periodiCon_cluster_Cont_img {
              width: 100%;
              height: 123px;
              position: relative;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .periodiCon_cluster_Cont_right {
              width: 100%;
              height: 102px;
              .periodiCon_cluster_Cont_right_tit {
                width: 100%;
                .periodiCon_cluster_Cont_right_tit_tit {
                  span {
                    font-size: 16px !important;
                  }
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 1;
                  line-clamp: 1;
                  /* autoprefixer: off */
                  -webkit-box-orient: vertical;
                  /* autoprefixer: on */
                  color: #333;
                  font-size: 18px;
                  float: left;
                }
                .periodiCon_cluster_Cont_right_tit_keyword {
                  display: inline-block;
                  span {
                    background: #eee;
                    border-radius: 9px;
                    line-height: 16px;
                    padding: 5px 6px;
                    display: inline-block;
                    font-size: 14px;
                    line-height: 1;
                    color: #777;
                    transform: scale(0.82);
                  }
                }
                .periodiCon_cluster_Cont_right_tit_huifang:hover {
                  background: #23b8ff;
                  color: #fff;
                }
                .periodiCon_cluster_Cont_right_tit_huifang {
                  position: absolute;
                  right: -3px;
                  top: 74%;
                  display: inline-block;
                  border: none;
                  font-size: 14px;
                  color: #23b8ff;
                  padding: 2px 15px;
                  cursor: pointer;
                }
              }
              p:nth-child(2) {
                width: 85%;
                height: auto;
                margin-top: 2px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                line-clamp: 1;
                /* autoprefixer: off */
                -webkit-box-orient: vertical;
                /* autoprefixer: on */
                span {
                  background: #eee;
                  border-radius: 9px;
                  line-height: 16px;
                  padding: 5px 6px;
                  display: inline-block;
                  font-size: 14px;
                  line-height: 1;
                  color: #777;
                  transform: scale(0.82);
                }
              }
              p:nth-child(3) {
                width: 100%;
                font-size: 16px;
                margin-top: 2px;
                color: #003c80;
              }
              p:nth-child(4) {
                width: 100%;
                font-size: 14px;
                margin-top: 2px;
                color: #999;
                span:nth-child(1) {
                  color: #333;
                  position: relative;
                  top: 1px;
                  span {
                    color: #003c80;
                    font-size: 16px;
                  }
                }
                span:nth-child(2) {
                  display: none;
                  float: right;
                  position: relative;
                  top: 1px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>